<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>良心有限医疗预约平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            neutral: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .hover-scale {
        transition: transform 0.3s ease;
      }
      .hover-scale:hover {
        transform: scale(1.02);
      }
    }
  </style>
</head>


<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <div class="flex items-center">
        <a href="#" class="flex items-center">
          <i class="fa fa-heartbeat text-primary text-3xl mr-2"></i>
          <span class="text-xl font-bold text-primary">良心有限医疗</span>
        </a>
        <!--        顶部导航栏-->
        <nav class="hidden md:ml-10 md:flex space-x-8">
          <a href="/moxiang/homef" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">首<br>页</a>
          <a href="/moxiang/departments" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">科室<br>导航</a>
          <a href="/moxiang/doctors" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">医生<br>团队</a>
          <a href="/moxiang/appointment" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">预约<br>挂号</a>
          <a href="/moxiang/about" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">关于<br>我们</a>
          <a href="/moxiang/ai" class="text-primary hover:text-primary/80 px-4 py-2 text-lg font-semibold ml-auto transition-colors flex items-center">
            <i class="fa fa-robot mr-2"></i> Ai问诊
          </a>
        </nav>
      </div>
      <div class="flex items-center">
        <div class="hidden md:flex items-center">
          <!-- 新增：头像、个人中心、退出登录 -->
          <img src="https://picsum.photos/40/40?random=user" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary mr-2">
          <span class="text-sm font-medium text-gray-700 mr-3">陈夏</span>
          <button id="userCenterBtn" class="mr-3 px-3 py-2 rounded-md text-sm font-medium text-primary border border-primary/30 hover:bg-primary/5 transition-colors">
            <i class="fa fa-user-circle mr-1"></i> 个人中心
          </button>
          <button id="logoutBtn" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 border border-gray-300 hover:bg-gray-50 transition-colors">
            <i class="fa fa-sign-out mr-1"></i> 退出登录
          </button>
        </div>
        <div class="md:hidden">
          <button id="mobileMenuBtn" class="text-gray-700 hover:text-primary focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

</header>

<!-- 登录/注册模态框 - 登录后隐藏，仅调整按钮状态 -->
<div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
  <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm" id="modalOverlay"></div>
  <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden transform transition-all">
    <div class="flex">
      <button id="loginTab" class="flex-1 py-4 text-center font-medium text-primary border-b-2 border-primary">登录</button>
      <button id="registerTab" class="flex-1 py-4 text-center font-medium text-gray-500 border-b-2 border-transparent">注册</button>
    </div>
  </div>
</div>



<!-- 主内容区域 - 保持不变 -->
<main>
  <!-- 英雄区域 -->
  <section id="home" class="pt-24 pb-16 bg-gradient-to-br from-primary/10 to-secondary/10">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col lg:flex-row items-center">
        <div class="w-full lg:w-1/2 mb-10 lg:mb-0">
          <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark">
            良心医疗，<br>
            <span class="text-primary">一键预约</span>
          </h1>
          <p class="mt-4 text-gray-600 text-lg max-w-xl">
            告别排队等待，轻松预约专家号，实时查看就诊进度，
            <br>
            治不活医生为你服务! 更贴心。
          </p>
          <div class="mt-8 flex flex-col sm:flex-row gap-4">
            <button id="appointmentBtn" class="px-8 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20 hover-scale">
              立即预约
            </button>
            <button id="aboutBtn" class="px-8 py-3 bg-white text-primary border border-primary rounded-lg font-medium hover:bg-primary/5 transition-colors hover-scale">
              了解更多
            </button>
          </div>
        </div>
        <div class="w-full lg:w-1/2 relative">
          <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl hover-scale">
            <img src="https://picsum.photos/800/600?random=1" alt="医疗预约平台界面" class="w-full h-auto">
          </div>
          <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary/20 rounded-full -z-10 blur-3xl"></div>
          <div class="absolute -top-6 -left-6 w-32 h-32 bg-primary/20 rounded-full -z-10 blur-3xl"></div>
        </div>
      </div>
    </div>
  </section>
</main>

<script>
  const appointmentBtn = document.getElementById('appointmentBtn')
  const aboutBtn = document.getElementById('aboutBtn')
  const logoutBtn = document.getElementById('logoutBtn')

  logoutBtn.addEventListener('click',async () => {

    // 调用后端的 logout 接口
    const response = await fetch('/moxiang/logout', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include'
    });
    // 检查响应状态
    if (response.redirected) {
      // 如果服务器返回重定向，手动跳转
      window.location.href = response.url;
    } else {
      // 如果没有重定向，检查其他状态
      const data = await response.json();
      console.log(data);
    }
  })


  //绑定了解更多，跳转到关于我们界面
  aboutBtn.addEventListener('click',()=>{
    window.location.href = '/moxiang/about';
  })
  //绑定立即预约，跳转到预约界面
  appointmentBtn.addEventListener('click',()=>{
    window.location.href = '/moxiang/appointment';
  })

</script>

</body>
</html>

